<template>
	<view class="content">
		<view class="navtab-box">
			<view :class="navIndex == 0?'nav-box' : ''" @click="navClick(0)">
				<view class="qb-tit">全部</view>
				<view class="bottom-line-1"></view>
			</view>
			<view :class="navIndex == 1?'nav-box' : ''" @click="navClick(1)">
				<view class="bmz-tit">报名中</view>
				<view class="bottom-line"></view>
			</view>
			<view :class="navIndex == 2?'nav-box' : ''" @click="navClick(2)">
				<view class="yjs-tit">已结束</view>
				<view class="bottom-line"></view>
			</view>
		</view>
		<view class="zc-box">
			<view class="zc-box-line"></view>
			<view class="zc-tit">
				招聘活动专场
			</view>
		</view>
		<view class="swiper-box" v-if="navIndex==0">
			<view class="swiper-item">
				<view class="item-box" v-for="item,i in list" :key="i">
					<view class="item-box-all">
						<view class="item-box-left">
							<image :src="item.pic"></image>
						</view>
						<view class="item-box-right" @click="zpCheck(item.id)">
							<view class="box-right-tit">{{ item.act_name }}</view>
							<view class="box-right-date">举办时间：{{ item.hold_start_time }}</view>
							<view class="box-right-qy">举办单位：{{ item.host_unit }}</view>
							<view class="box-right-btn">
								<view class="btn-right">查看</view>
								<view class="btn-left-1" v-if="item.status == 1">{{ item.status_name }}</view>
								<view class="btn-left" v-else="item.status == 2">{{ item.status_name }}</view>
							</view>
						</view>
					</view>
					<view style="padding: 0 30upx;">
						<view class="item-box-line"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="swiper-box" v-if="navIndex==1">
			<view class="swiper-item">
				<view class="item-box" v-for="item,i in list" :key="i">
					<view class="item-box-all">
						<view class="item-box-left">
							<image :src="item.pic"></image>
						</view>
						<view class="item-box-right">
							<view class="box-right-tit">{{ item.act_name }}</view>
							<view class="box-right-date">举办时间：{{ item.hold_start_time }}</view>
							<view class="box-right-qy">举办单位：{{ item.host_unit }}</view>
							<view class="box-right-btn">
								<view class="btn-right" @click="zpCheck()">查看</view>
								<view class="btn-left-1" v-if="item.status == 1">{{ item.status_name }}</view>
								<view class="btn-left" v-else="item.status == 2">{{ item.status_name }}</view>
							</view>
						</view>
					</view>
					<view style="padding: 0 30upx;">
						<view class="item-box-line"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="swiper-box" v-if="navIndex==2">
			<view class="swiper-item">
				<view class="item-box" v-for="item,i in list" :key="i">
					<view class="item-box-all">
						<view class="item-box-left">
							<image :src="item.pic"></image>
						</view>
						<view class="item-box-right">
							<view class="box-right-tit">{{ item.act_name }}</view>
							<view class="box-right-date">举办时间：{{ item.hold_start_time }}</view>
							<view class="box-right-qy">举办单位：{{ item.host_unit }}</view>
							<view class="box-right-btn">
								<view class="btn-right" @click="zpCheck()">查看</view>
								<view class="btn-left-1" v-if="item.status == 1">{{ item.status_name }}</view>
								<view class="btn-left" v-else="item.status == 2">{{ item.status_name }}</view>
							</view>
						</view>
					</view>
					<view style="padding: 0 30upx;">
						<view class="item-box-line"></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:{},
				status:0,
				navIndex:0,
			}
		},
		onLoad() {
			this.getData()
		},
		methods: {
			navClick(i){
				this.navIndex = i
				this.getData();
			},
			async getData() {
				this.status=this.navIndex
				const res = await this.get('/Index/Index/get_activity_list',{status:this.status});
				if(res.code == 200){
					this.list=res.data
				}
			},
			async zpCheck(id) {
				const res = await this.get('/Index/Index/get_activity_info_by_id',{'id':id});
				console.log(res)
				if(res.code == 200){
					uni.navigateTo({
						url:'../index/school_recruit_check?id='+id
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-box-line{
		width: 100%;
		height: 2upx;
		background: #EFEFEF;
	}
	.content{
		.navtab-box{
			display: flex;
			font-size: 30upx;
			margin-top: 28upx;
			.qb-tit{
				margin: 0 84upx 0 46upx;
			}
			.bmz-tit{
				margin-right: 96upx;
			}
			.yjs-tit{
				margin-right: 46upx;
			}
			.nav-box{
				color: #3291F8;
				.bottom-line{
					width: 92upx;
					margin: 26upx 0 56upx 0upx;
					border-bottom: 4upx solid #3291F8;
				}
				.bottom-line-1{
					width: 92upx;
					margin: 26upx 0 56upx 32upx;
					border-bottom: 4upx solid #3291F8;
				}
			}
		}
		.zc-box{
			display: flex;
			.zc-box-line{
				height: 40upx;
				border-left: 6upx solid #3291F8;
				margin: 0 10upx 34upx 38upx;
			}
			.zc-tit{
				color: #333333;
			}
		}
		.swiper-box{
			.swiper-item{
				.item-box{
					.item-box-all{
						display: flex;
						height: 306upx;
						.item-box-left{
							margin: 26upx 24upx 0 36upx;
							image{
								width: 280upx;
								height: 200upx;
							}
						}
						.item-box-right{
							.box-right-tit{
								color: #101010;
								margin: 36upx 36upx 20upx 0;
							}
							.box-right-date,.box-right-qy{
								font-size: 24upx;
								color: #8CA2AA;
								margin-top: 15upx;
							}
							.box-right-btn{
								margin-top: 20upx;
								display: flex;
								flex-direction: row-reverse;
								.btn-left{
									width: 120upx;
									color: #FCCA00;
									padding: 6upx 0;
									font-size: 24upx;
									text-align: center;
									background: #FFFFFF;
									border-radius: 10upx;
									border: 2upx solid #FCCA00;
								}
								.btn-left-1{
									width: 120upx;
									color: #27B148;
									padding: 6upx 0;
									font-size: 24upx;
									text-align: center;
									background: #FFFFFF;
									border-radius: 10upx;
									border: 2upx solid #27B148;
								}
								.btn-right{
									width: 120upx;
									color: #FFFFFF;
									padding: 6upx 0;
									font-size: 24upx;
									text-align: center;
									margin-left: 18upx;
									background: #3291F8;
									border-radius: 10upx;
									border: 2upx solid #3291F8;
								}
							}
						}
					}
				}
			}
		}
	}
</style>